<template>
    <div class="count">
        <h2>{{school}}坐落于{{countStore.address}}</h2>
        <h2>当前求和为:{{sum}}</h2>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="subtract">减</button>
    </div>
</template>

<script setup name="Count">
import { storeToRefs } from 'pinia';
import {ref} from 'vue';
import {useCountStore} from '../store/Count'
// 数据
const countStore = useCountStore();

const {sum,school} = storeToRefs(countStore);

// 数据监视
countStore.$subscribe((mutate,state)=>{
    console.log('countStore.$subscribe',mutate,state);
});

let n = ref(1);// 用户选择的数字
function add(){
    // 第一种
    // countStore.sum += n.value;
    // countStore.address = '济南';
    // 第二种
    // countStore.$patch({
    //     sum:2,
    //     school:'培立优123',
    //     address:'济南',
    // });
    // 第三种
    countStore.increment(n.value);
}
function subtract(){
    countStore.sum -= n.value;
}
</script>

<style scoped>
.count{
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}
select,button{
    margin: 0 5px;
    height: 25px;
}
</style>